import { usePiniaStorage } from '@/hooks/pinia/usePiniaStorage'
import { defineStore } from 'pinia'
import { ref } from 'vue'
import store from '..'
import type { GlobalTheme } from 'naive-ui'
import { darkTheme, lightTheme } from 'naive-ui'
import { AnimateSpeed } from '@/config/transition.config'

const appStore = defineStore('app', () => {
  // * 菜单折叠开关是否展示
  const menuShowTrigger = ref(true)
  // * 菜单展示位置
  const menuPosition = ref<'left' | 'top' | 'bottom'>('top')
  // * 菜单折叠开关
  const menuTrigger = ref(false)
  // * 菜单宽度 单位 px
  const menuWidth = ref(225)
  // * 是否使用手风琴菜单
  const menuAccordion = ref(true)
  // * 色彩模式
  const theme = ref<GlobalTheme>(lightTheme)
  // * 当前主色调
  const primary = ref('#1890ff')
  // * 设置弹出框是否展示
  const settingsShow = ref(true)
  // * 是否使用路由过度动画
  const routerTransition = ref(true)
  // * 路由过度动画类型
  const routerTransitionType = ref<'slide-left' | 'slide-right' | 'fade' | 'zoom'>('fade')
  // * 路由过度动画时长
  const routerTransitionDuration = ref<AnimateSpeed>(AnimateSpeed.FAST)

  function TriggerTheme(name: 'dark' | 'light') {
    if (name === 'dark') {
      theme.value = darkTheme
    } else {
      theme.value = lightTheme
    }
  }

  const result = {
    menuPosition,
    menuTrigger,
    menuShowTrigger,
    menuWidth,
    menuAccordion,
    theme,
    primary,
    settingsShow,
    routerTransition,
    routerTransitionType,
    routerTransitionDuration,
  }
  usePiniaStorage(result)

  return { ...result, TriggerTheme }
})
export const useAppStore = () => appStore(store)
